<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>最简单的例子</title>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <!-- 如果你要可以标记必须加入下面的库 -->
    <script src="../lib/highmap/proj4-2.3.6-min.js"></script>
    <script src="../lib/highmap/Highmaps.js"></script>
    <!--地图数据-->
    <script type="text/javascript" src="../lib/highmap/cn-china-by-peng8.js"></script>
    <script>
    $(function () {
        // 特别注意最后要加多个highcharts
        var mychart=$('#container').highcharts('Map', {

            mapNavigation: {
                enabled: true
            },

            tooltip: {
                headerFormat: '',
                pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}<br>地址：{point.addr}'
            },

            series: [{
                // Use the gb-all map with no data as a basemap
                mapData: Highcharts.maps['countries/cn/custom/cn-all-china'],
                name: 'Basemap',
                borderColor: '#A0A0A0',
                nullColor: 'rgba(200, 200, 200, 0.3)',
                showInLegend: false
            },{
                // Specify points using lat/lon
                type: 'mappoint',
                name: 'Cities',
                color: Highcharts.getOptions().colors[1],
                data: [
                    {
                        id:'nm',
                        name: '南牧公司',
                        lat: 22.7186680000,
                        lon: 112.2062470000,
                        addr:'广东省云浮市新兴县'
                    },{
                        name:'高村猪场',
                        lat:22.6136170000,
                        lon:112.4843890000,
                        addr:'广东省云浮市新兴县'
                    },{
                        name:'羊头猪场',
                        lat:22.8108950000,
                        lon:108.3465340000,
                        addr:'广东省云浮市新兴县'
                    },
                ]
            }]
        }).highcharts();
        console.log(mychart);
        //series[0]为地图数据
        //mychart为API里面的Charts对象
        //mychart.tooltip.refresh(mychart.series[1].points[1]);
        $('.nm').click(function(){
            console.log(mychart.get('nm'));
            // var x=mychart.series[1].points[1].x;
            // var y=mychart.series[1].points[1].y;
            var x=mychart.get('nm').x;
            var y=mychart.get('nm').y;
            mychart.mapZoom(0.5,x,y);//0.5代表在当前的大小再放大
        });
        $('.gt').click(function(){
            mychart.mapZoom();
        })
    });
    </script>
</head>
<body>
	<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
    <button class="nm">定位到南牧公司</button>
    <span>-----</span>
    <button class="gt">返回到全国</button>
    <br>
    <a href="http://api.highcharts.com/highcharts#Chart">API</a><br>
    <a href="http://api.highcharts.com/highmaps#Point.zoomTo">官网zoomto point api</a><br>
    <a href="http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/maps/members/point-zoomto/">官网zoomtopoint例子</a>
    <br><a href="http://stackoverflow.com/questions/28933713/how-to-zoom-to-specific-point-in-highmaps">zoomto特殊的点</a>

</body>
</html>